<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          /* 定义动画 */
          @keyframes loading-animation {
            0% {
                transform: rotate(0deg);
                background-color: rgb(209, 191, 191);
            }

            100% {
                transform: rotate(360deg);
                background-color: rgb(223, 114, 114);
            }
          }
        .demo1 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid rgb(255, 230, 230);
            border-left: 5px solid #FFb5bf;
            /* 使用动画*/
            animation: loading-animation;
            /* 动画一次的时间 */
            animation-duration:3s;
            /* 定义动画播放多少次 */
            animation-iteration-count: infinite;
            /* 延迟时间 */
            animation-delay:1s;
            /* 播放顺序 先向前 后向后 */
            animation-direction:alternate;
            /* 动画的速度变化 */
            animation-timing-function:ease-in-out;

        }
      
        
    </style>
</head>

<body>
    <div class="demo1">

    </div>
</body>

</html>